<template>
	<view class="myLottery">
		<view class="navs_lines f f_column f_align_center">
			<view class="nav_title">我的奖券</view>
			<view class="t_text_1">剩余优惠券：{{userInfo.accountEntity.raffleTicket}}张</view>
			<view class="t_text_2">优惠券可用于奖池抽奖活动</view>
			<view class="t_text_btn bold" @click="$tabTo('./raffle')">去抽奖</view>
		</view>
		<view class="navs_lines mt f f_column f_align_center">
			<view class="nav_title">做任务,得奖券</view>
			<view class="raf_warps_num mt task_pad f f_align f_align_center">
				<view class="f f_align_center">
					<image class="task_ico f_shrink0" src="/static/cj/wx@2x.png" mode=""></image>
					<view class="f f_column">
						<text class="bold task_friend">分享好友</text>
						<text class="">可获得<text class="price_red">1</text>奖券</text>
					</view>
				</view>
				<view class="doTask bold" @click="$navTo('../share/share')">去分享</view>
			</view>
			<view class="raf_warps_num mt task_pad f f_align f_align_center">
				<view class="f f_align_center">
					<image class="task_ico f_shrink0" src="/static/cj/task@2x.png" mode=""></image>
					<view class="f f_column">
						<text class="bold task_friend">做任务</text>
						<text class="">可获得<text class="price_red">1</text>奖券</text>
					</view>
				</view>
				<view class="doTask bold" @click="$tabTo('../task/task')">做任务</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					accountEntity:{
						raffleTicket:0
					}
				}
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myLottery{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding: 24rpx;
		.navs_lines{
			background-color: #FEF5F0;
			border-radius: 6rpx;
			&.mt{
				margin-top: 54rpx;
			}
			.t_text_1{
				font-size: 32rpx;
				color: #CE7501;
			}
			.t_text_2{
				font-size: 24rpx;
				color: #868686;
				margin-top: 23rpx;
			}
			.t_text_btn{
				box-sizing: border-box;
				padding-bottom: 25rpx;
				@include flex_center;
				width: 556rpx;
				height: 124rpx;
				font-size: 32rpx;
				color: #D93F00;
				background: url('/static/cj/lottery@2x.png') no-repeat center;
				background-size: 100% 100%;
				margin-top: 17rpx;
			}
			.nav_title{
				width: 100%;
				height: 60rpx;
				padding-bottom: 20rpx;
				background:url('/static/cj/navs@2x.png') no-repeat center top;
				background-size: 100% 80rpx;
				@include flex_center;
				font-size: 32rpx;
				color: #fff;
				margin-top: -15rpx;
			}
			.raf_warps_num{
				width: 654rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12rpx;
				margin: 32rpx 0 16rpx;
				padding: 20rpx 0;
				font-size: 24rpx;
				color: #CEB08A;
				&.mt{margin-top: 16rpx;}
				&.task_pad{
					padding: 28rpx 24rpx;
					font-size: 22rpx;
					color: #999999;
				}
				.task_ico{
					width: 84rpx;height: 84rpx;
					margin-right: 12rpx;
				}
				.raf_price{
					font-size: 48rpx;
				}
				.task_friend{
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
				.price_red{color: #FF3C39;padding: 0 6rpx;}
				.doTask{
					@include flex_center;
					font-size: 22rpx;
					color: #B05A0F;
					width: 136rpx;
					height: 54rpx;
					border-radius: 25rpx;
					background-image: linear-gradient(to right,#FDE055,#FFBB01);
				}
			}
		}
	}
</style>
